<template>
	<view class="template-details">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>
		<!-- 顶部自定义导航结束 -->

		<!-- 中间部分开始 -->
		<view class="container"
			:style="'background-image: url('+bgUrl+');background-size: cover;background-position:center;background-repeat: no-repeat;background-attachment: fixed;'">

			<!-- 顶部卡片开始 -->
			<view class="container-top-card">
				<view class="top-card">
					<view class="justify-content-item align-content-item top-time">
						<view class="current-day">
							{{ day }}
						</view>
						<view class="current-time">
							{{ currentTime }}
						</view>
					</view>
					<view class="align-content-item card-button top-air">
						<view class="current-weather">
							晴朗
						</view>
						<view class="current-temperature">
							32℃
						</view>
					</view>
				</view>
				<view class="footer-card" style="width: 100%;">
					<view class="footer-card-item" v-for="(item, index) in topList">
						<image :src="item.url" alt=""></image>
						<view class="">
							<text>{{item.text}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 顶部卡片结束 -->

			<!-- 中间app开始 -->
			<view class="container-app">
				<view class="image-container">
					<view class="app-img-item" v-for="(item, index) in cardList">
						<image :src="item.url" alt=""></image>
						<view class="">
							<text>{{item.text}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 中间app结束 -->

		</view>
		<!-- 中间部分结束 -->

		<!-- 底部导航开始 -->
		<view class="footer">
			<view class="footer-content">
				<view class="img-item" v-for="(item, index) in bottomList">
					<image :src="item.url" alt=""></image>
				</view>
			</view>
		</view>
		<!-- 底部导航结束 -->

	</view>
</template>


<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'ImagePrivew',
		mixins: [template_page_mixin],
		computed: {
			// 兼容小程序
			gridItemWidth() {
				return 100 / 4 + '%'
			}
		},
		data() {
			return {
				bgUrl: "http://qiniucloudtest.qqdeveloper.com/ae3677ab302e1936843f3f5d49204439.jpg",
				topList: [{
						text: "邮件",
						url: "http://qiniucloud.qqdeveloper.com/rabbitemail.png"
					},
					{
						text: "时间",
						url: "http://qiniucloud.qqdeveloper.com/rabbitcutdown.png"
					},
					{
						text: "音乐",
						url: "http://qiniucloud.qqdeveloper.com/rabbitmusic.png"
					},
					{
						text: "商店",
						url: "http://qiniucloud.qqdeveloper.com/rabbitapp.png"
					},
				],
				cardList: [{
						text: "电话",
						url: "http://qiniucloud.qqdeveloper.com/rabbmobile.png"
					},
					{
						text: "地图",
						url: "http://qiniucloud.qqdeveloper.com/rabbitmap.png"
					},
					{
						text: "演示稿",
						url: "http://qiniucloud.qqdeveloper.com/rabbitppt.png"
					},
					{
						text: "蓝牙",
						url: "http://qiniucloud.qqdeveloper.com/rabbitlanya.png"
					},
					{
						text: "日历",
						url: "http://qiniucloud.qqdeveloper.com/rabbitrili.png"
					},
					{
						text: "WiFi",
						url: "http://qiniucloud.qqdeveloper.com/rabbitwifi.png"
					},
					{
						text: "热点",
						url: "http://qiniucloud.qqdeveloper.com/rabbitredian.png"
					},
					{
						text: "表格",
						url: "http://qiniucloud.qqdeveloper.com/rabbitnumber.png"
					},
					// {
					// 	text: "手表",
					// 	url: "http://qiniucloud.qqdeveloper.com/rabbitwatch.png"
					// },
					// {
					// 	text: "书籍",
					// 	url: "http://qiniucloud.qqdeveloper.com/rabbitbook.png"
					// },
					// {
					// 	text: "文稿",
					// 	url: "http://qiniucloud.qqdeveloper.com/rabbitdock.png"
					// },
					// {
					// 	text: "Store",
					// 	url: "http://qiniucloud.qqdeveloper.com/rabbitcollection.png"
					// },
				],
				bottomList: [{
						text: "",
						url: "http://qiniucloud.qqdeveloper.com/123123123.png"
					},
					{
						text: "",
						url: "http://qiniucloud.qqdeveloper.com/rabbitseeting.png"
					},
					{
						text: "",
						url: "http://qiniucloud.qqdeveloper.com/rabbittianqi.png"
					},
					{
						text: "",
						url: "http://qiniucloud.qqdeveloper.com/rabbitfacetime.png"
					},
				],
				day: '',
				currentTime: '00:00',
			}
		},
		onLoad(params) {
			this.bgUrl = params.imageUrl || "http://qiniucloudtest.qqdeveloper.com/ae3677ab302e1936843f3f5d49204439.jpg"
			this.getCurrentTime()
			this.showAd()
		},
		methods: {
			async showAd() {
				if (getApp().globalData.showAd) {
					let _that = this
					let videoAd = null
					let adIdArray = getApp().globalData.rewardedVideoAd
					let index = await this.$func.randomIntFromInterval(0, adIdArray.length - 1)
					if (uni.createRewardedVideoAd) {
						videoAd = uni.createRewardedVideoAd({
							adUnitId: adIdArray[index]
						})
						videoAd.onLoad(() => {})
						videoAd.onError((err) => {
							console.log("error", err)
							_that.$func.showToast(err.errMsg)
						})
						videoAd.onClose((res) => {
							console.log("ad close", res)
							if (res.isEnded) {
								userScoreAdd({
									title: "观看广告"
								}).then(res => {
									if (res.code == 0) {
										_that.$func.showToast("获得" + res.score + "积分")
										_that.score = (parseFloat(res.score) + parseFloat(_that.score)).toFixed(2)
										return
									}
									_that.$func.showToast(res.errMsg)
								})
							}
						})
					}
					if (videoAd) {
						videoAd.show().catch(() => {
							// 失败重试
							videoAd.load()
								.then(() => videoAd.show())
								.catch(err => {
									console.log(err)
									_that.$func.showToast(err.errMsg)
								})
						})
					}
				}
			},
			getCurrentTime() {
				var currentTime = new Date()
				var hours = currentTime.getHours().toString().padStart(2, '0')
				var minutes = currentTime.getMinutes().toString().padStart(2, '0')
				var seconds = currentTime.getSeconds().toString().padStart(2, '0')
				var timeString = hours + ':' + minutes // + ':' + seconds
				this.currentTime = timeString
				var days = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				this.day = days[currentTime.getDay()]
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/scss/custom_nav_bar.scss";

	// 中间开始
	.container {
		width: 100%;
		height: 100%;
	}

	.container-top-card {
		background-color: rgba(#333333, 0.5);
		height: 320rpx;
		width: 90%;
		position: fixed;
		margin-left: 5%;
		margin-right: 5%;
		top: 17%;
		border-radius: 10rpx;
	}

	.top-time {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 50%;
	}

	.current-day {
		font-size: 30rpx;
	}

	.current-time {
		font-size: 50rpx;
		margin-left: 10rpx;
	}

	.top-air {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 50%;
	}

	.current-weather {
		font-size: 30rpx;
		color: #FBBD12;
	}

	.current-temperature {
		font-size: 50rpx;
		margin-left: 10rpx;
		color: #FF7043;
	}

	.top-card {
		display: flex;
	}

	.card-button {
		margin: 40rpx 0rpx;
	}

	.card-search {
		margin: 40rpx;
		margin-left: 10rpx;
	}

	.container-app {
		position: fixed;
		top: 50%;
		width: 100%;
	}

	.image-container {
		display: flex;
		justify-content: space-between;
		text-align: center;
		flex-wrap: wrap;
		width: 100%;
	}

	.app-img-item {
		width: 25%;
		height: 120rpx;
		margin-bottom: 70rpx;
	}

	.app-img-item image {
		margin-top: 15rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.footer-card {
		width: 100%;
		display: flex;
		justify-content: space-around;
		text-align: center;
	}

	.footer-card-item {
		width: 25%;
		height: 60rpx;
	}

	.footer-card-item image {
		margin: 15rpx 0;
		width: 60rpx;
		height: 60rpx;
	}

	// 中间结束

	// 底部按钮开始
	.footer {
		position: fixed;
		width: 100%;
		height: 130rpx;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(51, 51, 51, .5);
	}

	.footer-content {
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
	}

	.img-item {
		width: 25%;
		height: 130rpx;
	}

	.img-item image {
		margin: 15rpx 0;
		width: 100rpx;
		height: 100rpx;
	}

	// 底部按钮结束
</style>